<!-- src/views/metal/settlementDialog.vue -->
<template>
  <el-dialog
    v-model="visible"
    title="结算"
    width="500px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="settlement-dialog-content">
      <!-- Settlement Description -->
      <el-alert
        title="结算说明"
        type="info"
        description="结算会把之前用户的交易记录进行归档记录，并且把汇总后的存欠料和存欠款作为新开始结算周期的期初起始记录。"
        show-icon
        style="margin-bottom: 20px;"
      />

      <!-- Settlement Options -->
      <el-form :model="formData" label-width="100px">
        <!-- Option 1: Settlement Date 
        <el-form-item label="结算方式">
          <el-radio-group v-model="formData.settlementType">
            <el-radio label="all">全部记录结算</el-radio>
            <el-radio label="date">截至日期结算</el-radio>
          </el-radio-group>
          <div class="option-description">
            截至日期结算指结算到指定日期，该日期之后的记录会自动放到新的周期。
          </div>
        </el-form-item>

      
        <el-form-item v-if="formData.settlementType === 'date'" label="截至日期">
          <el-date-picker
            v-model="formData.endDate"
            type="date"
            placeholder="选择截至日期"
            value-format="YYYY-MM-DD"
            style="width: 100%;"
          />
        </el-form-item>
        -->
           
      
        <el-form-item  label="截至日期">
          <div class="option-description">
            截至日期结算指结算到指定日期，该日期之后的记录会自动放到新的周期。
          </div>
          <el-date-picker
            v-model="formData.endDate"
            type="date"
            placeholder="选择截至日期"
            value-format="YYYY-MM-DD"
            style="width: 100%;"
          />
        </el-form-item>

        <!-- Option 2: Minimum Records -->
        <el-form-item label="最少记录">
          <el-input-number
            v-model="formData.minRecords"
            :min="0"
            controls-position="right"
            style="width: 100%;"
          />
          <div v-if="formData.minRecords > 0" class="option-description">
            如果交易记录少于设定记录则新周期会和之前记录一样，多于设定数量则会则会汇总存欠料和存欠款作为新的结算周期的期初起始记录。
          </div>
          <div v-if="formData.minRecords <= 0" class="option-settelall-description">
            结算所有记录。
          </div>
        </el-form-item>
        
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="startSettlement">开始结算</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'SettlementDialog',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        settlementType: 'all', // 'all' or 'date'
        endDate: '',
        minRecords: 20
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
  methods: {
    closeDialog() {
      this.visible = false
    },
    handleClose() {
      this.$emit('close')
    },
    startSettlement() {
      // Emit event with form data
      this.$emit('start-settlement', { ...this.formData })
    }
  }
}
</script>

<style scoped>
.option-description {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  line-height: 1.4;
}
</style>

<style scoped>
.option-settelall-description {
  font-size: 12px;
  color: #f0940a;
  margin-top: 5px;
  line-height: 1.4;
}
</style>